<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" safe-area-inset-bottom>
	<view class="content p15" style="margin-bottom: 60rpx;">
		<view v-for="(item,index) in dataList" :key="index" @click="desc(item.id)">
			<view class="card ">
				<view class="space-between" style="margin-bottom: 20rpx;">
					<view class="titlke">行程审批</view>
					<view class="flex-start" style="text-align: right;">
						<view class="status" v-if="item.status==0">{{getStatus(item.status)}}</view>
						<view class="status1" v-if="item.status==1">{{getStatus(item.status)}}</view>
						<view class="status2" v-if="item.status==-1">{{getStatus(item.status)}}</view>
					</view>
				</view>
				<view class="space-between">
					<view class="time">编号:{{item.id}}</view>
					<view class="time">{{item.createdate}}</view>
				</view>
			</view>
		</view>
	</view>
	</z-paging>
</template>

<script>
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		data() {
			return {
				list: [],
				dataList: [],
				quesForm: {
					pageNum: '',
					pageSize: 10
				},
			}
		},
		onLoad() {
		},
		methods: {
			getStatus(status) {
				console.log(status)
				switch (status) {
					case '0':
						return '审核中';
						break;
					case '1':
						return '通过';
						break;
					case '-1':
						return '拒绝';
						break;
					default:
						break;
				}
			},
			queryList(pageNo, pageSize) {
				let self = this;
				self.quesForm.pageNum = pageNo
				self.quesForm.pageSize = pageSize
				api.getApprovalList(self.quesForm).then((res) => {
					console.log('res', res)
					this.$refs.paging.complete(res.data.data);
				}).catch((err) => {
					console.log('err', err)
					this.$refs.paging.complete(false);
				})
			},
			desc(id) {
				uni.navigateTo({
					url: '/pages/approval/details?id=' + id
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #EEF8FE;
	}

	.title {
		margin-top: 20rpx;
	}

	.card {
		box-shadow: 0rpx 0rpx 12rpx 4rpx #d1eeff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.color55 {
		color: #55535C;
	}

	.adress {
		border-top: 2rpx dashed #55535C;
		height: 74rpx;
		line-height: 74rpx;
		margin-top: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	.status {
		text-align: right;
		float: right;
		font-weight: 500;
		font-size: 32rpx;
		color: #0D5AD3;
		line-height: 36rpx;
	}

	.status1 {
		font-weight: 500;
		font-size: 32rpx;
		color: #34C759;
		line-height: 36rpx;
	}

	.status2 {
		font-weight: 500;
		font-size: 32rpx;
		color: #FF3B30;
		line-height: 36rpx;
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
	}
	.titlke{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 36rpx;
	}
</style>